<template>
    <div class="m-container">
        <div class="m-flex m-bgc">
            <div v-for="(item,index) in products" :key="index" style="margin-bottom: 10px" class="m-right"
                 :class="{ 'm-left': index%2==0 }"
                @click="transmitProductIdToParent(item.id)"
            >
                <img :src="item.image" width="185" height="120">
                <div class="m-center" style="width: 185px">
                    <p class="m-hidden">{{item.name}}</p>
                    <p>{{item.price/100}}元</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ProductList",
        props: ['products'],
        methods: {
            transmitProductIdToParent(id) {
                this.$emit("changeProductId", id)
            }
        }
    }
</script>

<style scoped>
    .m-hidden {
        overflow: hidden;
        width: 185px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .m-bgc {
        background-color: aliceblue;
    }

    .m-center {
        text-align: center;
    }

    .m-flex {
        display: flex;
        flex-wrap: wrap;
    }

    .m-container {
        padding: 12px;
    }

    .m-left {
        margin-right: 14px;
    }


</style>
